<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<link rel="stylesheet" href="css/bootstrap-3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/register.css" />
<link rel="stylesheet" href="css/newListcommon.css" />
<link rel="stylesheet" href="css/evaluation.css" />
<link rel="stylesheet" href="css/maintenanceForm.css" />
<style>
    #showFile a{
        display: block;
        text-decoration: none;
        color:#777;
        line-height:24px;
    }
   .comTreemodal .modal-dialog{
       width:1000px;
       max-width:1000px;
   }
    .comTreemodal .modal-dialog .modal-body{
        height:500px;
        overflow:scroll;
    }
    .cancelBtn{
        display: inline-block;background: #e36858;color:#fff !important;width: 120px;height: 40px;text-align: center;line-height: 40px;font-weight: 400;border-radius: 2px;text-decoration: none;
    }
    .form-group select, .form-group input {
        width: calc(100vw / 2 - 352px);
    }
    .form-group label:nth-child(4){
        width:30px;
    }
    .addMaintenanceForm .col-md-12 .fuyan {
        width: calc(100vw - 408px);
    }
</style>
<%-- 导入面包屑 --%>
<jsp:include page="../common/nav.jsp"></jsp:include>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="purchaseOrder addMaintenanceForm">
        <form id="form" action="web/poAgreementHead/editPoHead" method="post">
            <div class="formTitle">合同基本信息</div>
            <div class="trackInfomation">
                <input id="poHeadId" name="poHeadId" type="hidden" value="${requestScope.poHead.poHeadId}">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同名称：</label>
                            <input id="poName" name="poName" type="text" class="form-control" placeholder="合同名称" value="${requestScope.poHead.poName}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同编码：</label>
                            <input id="poHeadCode" name="poHeadCode" type="text" class="form-control" placeholder="合同编码" value="${requestScope.poHead.poHeadCode}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同单号：</label>
                            <input id="projectCode" name="projectCode" type="text" class="form-control" placeholder="合同单号" value="${requestScope.poHead.projectCode}" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>签订单位：</label>
                            <input id="vendorCode" name="vendorCode" type="text" class="form-control" placeholder="请选择签订单位"  data-toggle="modal"  value="${requestScope.poHead.vendorCode}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>发起单位：</label>
                            <input id="sponsorCode" name="sponsorCode" type="text" class="form-control" placeholder="请选择发起单位" data-toggle="modal" value="${requestScope.poHead.sponsorCode}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同性质：</label>
                            <select class="form-control" name="taxType" id="taxType" >
                                <option>请选择合同性质</option>
                                <c:forEach items="${requestScope.poQualeMap}" var="taxType">
                                    <option value="${taxType.key}">${taxType.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同类别：</label>
                            <select class="form-control" name="taxPercent" id="taxPercent">
                                <option>请选择合同类别</option>
                                <c:forEach items="${requestScope.poCateMap}" var="taxPercent">
                                    <option value="${taxPercent.key}">${taxPercent.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>合同类型：</label>
                            <select class="form-control" name="poType" id="poType" onchange="funcPoTypeChange()">
                                <option>请选择合同类型</option>
                                <c:forEach items="${requestScope.poTypeMap}" var="poType">
                                    <option value="${poType.key}">${poType.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>实施站点：</label>
                            <input id="orgCode" name="orgCode" type="text" class="form-control" placeholder="请选择实施站点" data-toggle="modal" value="${requestScope.poHead.orgCode}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <span>*</span>
                            <label>实施部门：</label>
                            <input id="departmentCode" name="departmentCode" type="text" class="form-control" placeholder="请选择实施部门" data-toggle="modal" value="${requestScope.poHead.departmentCode}">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <span></span>
                            <label class="fuyanText">使用方向：</label>
                            <textarea style="height:80px !important;" id="poDesc" name="poDesc" class="form-control fuyan" rows="3">${requestScope.poHead.poDesc}</textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <span></span>
                            <label class="fuyanText">上传附件：</label>
                            <div class="upload-wrap fuyanFile" id="uploadImgBtn0">
                                <input style="width:180px;" type="file" multiple="multiple" name="files" id="file0"/>
                                <input id="fileUrl" name="fileUrl" type="hidden"  value="${requestScope.poHead.fileUrl}">
                                <span style="color:#2972FA;font-size:14px;position:relative;top:1px;opacity:0.8; ">上传文件不能超过10M</span>
                            </div>
                        </div>
                        <div id="showFile" style="margin-left:136px;"></div>
                    </div>
                </div>
                <div class="formTitle">合同详细信息</div>
                <div class="trackInfomation">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>结算方式：</label>
                                <select class="form-control" name="settleStyle" id="settleStyle">
                                    <option>请选择结算方式</option>
                                    <c:forEach items="${requestScope.poSettleMap}" var="settleStyle">
                                        <option value="${settleStyle.key}">${settleStyle.value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>实施地点：</label>
                                <input id="constructionSite" name="constructionSite" type="text" class="form-control" placeholder="实施地点" value="${requestScope.poHead.constructionSite}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>合同来源方式：</label>
                                <select class="form-control" name="sourceMode" id="sourceMode">
                                    <option>请选择合同来源方式</option>
                                    <c:forEach items="${requestScope.poSourceMap}" var="sourceMode">
                                        <option value="${sourceMode.key}">${sourceMode.value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span> </span>
                                <label>审批表档案号：</label>
                                <input id="approvalFileNo" name="approvalFileNo" type="text" class="form-control" placeholder="审批表档案号" value="${requestScope.poHead.approvalFileNo}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>补充描述：</label>
                                <input id="addDesc" name="addDesc" type="text" class="form-control" placeholder="补充描述" value="${requestScope.poHead.addDesc}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>签订日期：</label>
                                <input id="startDate" name="startDate" type="text" class="form-control" placeholder="签订日期" value="${requestScope.poHead.startDate}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>终止日期：</label>
                                <input id="endDate" name="endDate" type="text" class="form-control" placeholder="终止日期" value="${requestScope.poHead.endDate}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>是否为据实结算：</label>
                                <input style="position:relative;left: -187px;" id="isRealSettle" name="isRealSettle" type="checkbox" class="form-check-input" value="是">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>合同金额：</label>
                                <input id="poaAmount" name="poaAmount" type="text" class="form-control" placeholder="合同金额" value="${requestScope.poHead.poaAmount}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>货币：</label>
                                <select class="form-control" name="currencyCode" id="currencyCode">
                                    <option>请选择货币</option>
                                    <c:forEach items="${requestScope.currencyTypeMap}" var="currencyType">
                                        <option value="${currencyType.key}" <c:if test="${currencyType.key=='rmb'}"> selected="selected" </c:if>>
                                                ${currencyType.value}
                                        </option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>质保金额：</label>
                                <input id="warrantyAmount" name="warrantyAmount" type="text" class="form-control" placeholder="质保金额" value="${requestScope.poHead.warrantyAmount}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>质保期限：</label>
                                <input id="warrantyPeriod" name="warrantyPeriod" type="text" class="form-control" placeholder="质保期限" value="${requestScope.poHead.warrantyPeriod}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>合同预估金额：</label>
                                <input id="prepayAmount" name="prepayAmount" type="text" class="form-control" placeholder="合同预估金额" value="${requestScope.poHead.prepayAmount}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="formTitle">供应商信息</div>
                <div class="trackInfomation">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>*</span>
                                <label>公司名称：</label>
                                <select class="form-control" name="staffCode" id="staffCode" onchange="funcVendorSelect()">
                                    <option>请选择公司名称</option>
                                    <c:forEach items="${requestScope.vendorMap}" var="staffCode">
                                        <option value="${staffCode.key}">${staffCode.value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>公司地址：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="公司地址" id="vendorAddress">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>公司传真：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="公司传真" id="email">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>所属省份：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="所属省份" id="vendorProvince">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>市、州：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="市、州" id="vendorCity">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>邮政编码：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="邮政编码" id="youzhengbianma">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>客户联系人：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="客户联系人" id="contactName">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>联系电话：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="联系电话" id="contactTelephone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>收款单位：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="收款单位" id="staffName">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>开户银行：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="开户银行" id="bankCode">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>银行账号：</label>
                                <input readonly="readonly" type="text" class="form-control" placeholder="银行账号" id="bankAccount">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label class="fuyanText">收付款方式：</label>
                                <textarea style="height:80px !important;" id="paymentMethod" name="paymentMethod" class="form-control fuyan" rows="3">${requestScope.poHead.paymentMethod}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="formTitle">合同谈判参与人员</div>
                <div class="trackInfomation">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <span>&nbsp;</span>
                                <label>姓名：</label>
                                <input id="poParticipants" name="poParticipants" type="text" class="form-control" placeholder="支持输入多人，中间用顿号进行间隔" value="${requestScope.poHead.poParticipants}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="formTitle">
                    付款状况
                    <button id="addFuKuai" type="button" class="btn  addMetarial" data-toggle="modal">添加</button>
                </div>
                <div class="tableWrap">
                    <table class="table table-bordered" id="subBody">
                        <thead >
                        <tr>
                            <th width="5%">序号</th>
                            <th>支付批次</th>
                            <th>支付金额</th>
                            <th>支付比例</th>
                            <th>剩余金额</th>
                            <th>支付时间</th>
                            <th>备注</th>
                            <th width="10%">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="formTitle">签批流程设置</div>
                <div class="trackInfomation">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <span>*</span>
                                <label>选择流程审批人：</label>
                                <input id="nextapproverid" name="nextapproverid" type="hidden" class="form-control" >
                                <input id="nextapprovername" name="nextapprovername" type="text" class="form-control" placeholder="请选择人员" data-toggle="modal" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="trackSubmit">
                    <button id="submit" data-toggle="modal" data-target=".bs-example-modal-sm">提交</button>
                    <a class="cancelBtn" id="cancel" onclick="window.location.href='web/poAgreementHead/getPoHeadList'">取消</a>
                </div>
            </div>
        </form>
    </div>
    <div  class="modal " id="addDiv" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document" style="margin-top:50px;">
            <div class="modal-content" style="padding: 0 20px">
                <div class="modal-header">
                    <h4 class="modal-title" id="ora_modal_title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="close()"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <c:import url="/web/hrDepartment/getHrDepartmentTreeReadOnly" charEncoding="utf-8"></c:import>
                </div>
            </div>
        </div>
    </div>
    <!--选择下一步审批人模态框-->
    <div id="approverSelect" class="modal comTreemodal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content" >
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <%--<c:import url="/web/hrDepartment/getHrDepartmentTreeReadOnly" charEncoding="utf-8"></c:import>--%>
                                <div class="ibox ">
                                    <div class="ibox-content border-bottom">
                                        <div class="input-group col-sm-12">
                                            <div class="input-group-addon bg-info">
                                                <i class="fa fa-search"></i>
                                            </div>
                                            <input type="text" class="form-control" id="searchTree1" placeholder="输入查询条件...">
                                        </div>
                                        <div class="hr-line-dashed"></div>
                                        <div id="jstree_div1" style="overflow: auto;"></div>
                                    </div>
                                </div>
                        </div>
                        <div id="relateListDiv" class="col-sm-6"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submitSelect">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="addPayment" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="padding: 0 20px">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">添加付款情况</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="addPaymentForm">
                        <div class="row">
                            <div class="col-md-6">
                                <span style="color: red">*</span>
                                <label>支付批次：</label>
                                <input id="paymentBatch" name="paymentBatch" type="text" class="form-control"  placeholder="请输入支付批次">
                            </div>
                            <div class="col-md-6">
                                <span style="color: red">*</span>
                                <label>支付金额：</label>
                                <input id="amountPayable" name="amountPayable" type="text" class="form-control" placeholder="请输入支付金额" onchange="funcAmountPayableChange()">
                            </div>
                            <div class="col-md-6">
                                <span style="color: red">*</span>
                                <label>支付比例：</label>
                                <input id="paymentProportion" name="paymentProportion" type="text" class="form-control" placeholder="请输入支付比例">
                            </div>
                            <div class="col-md-6">
                                <span>&nbsp;&nbsp;</span>
                                <label>剩余金额：</label>
                                <input id="remainingAmount" name="remainingAmount" type="text" class="form-control" readonly>
                            </div>
                            <div class="col-md-6">
                                <span>&nbsp;&nbsp;</span>
                                <label>支付时间：</label>
                                <input id="payDate" name="payDate" type="text" class="form-control" placeholder="支付时间">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closePopout();">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="savePoAgreementHeadM()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="css/bootstrap-3.3.7/js/address.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(document).ready(function() {
        //下一步流程审批者
        $("#nextapprovername").on("click",function(){
            $('#approverSelect').modal('show');
            $('.show').removeClass("modal-backdrop");
        });
        $("#submitSelect").on("click",function(){
            debugger;
            var apprcodes = "";//选中参与者编码串
            var apprnames = "";//选中参与者名称串
            var checkedIds = $("#userSelect").find("input"), ids = [];
            for (var i = 0; checkedIds && i < checkedIds.length; i++) {
                var obj = $("#userSelect").find("input").eq(i);
                if (obj.is(":checked")) {
                    ids.push(obj.attr("id"));
                }
            }
            console.log(ids);
            if(ids.length>0){
                $.each(ids, function (index, item) {
                    apprcodes+=item.split('_')[0]+',';
                    apprnames+=item.split('_')[1]+',';
                });
                $('#nextapproverid').val(apprcodes.substring(0,apprcodes.length-1));
                $('#nextapprovername').val(apprnames.substring(0,apprnames.length-1));
                $('#approverSelect').modal('hide');
            }else{
                redragonJS.alert("请选择流程参与者");
            }
        });
        //签订单位选择弹框
        $("#vendorCode").on("click",function(){
            $('#ora_modal_title').text("选择签订单位")
            $('#addDiv').modal('show');
            $('.show').removeClass("modal-backdrop");
            $('.ibox-title').remove();
            element_id = "vendorCode";
        });
        //发起单位选择弹框
        $("#sponsorCode").on("click",function(){
            $('#ora_modal_title').text("选择发起单位")
            $('#addDiv').modal('show');
            $('.show').removeClass("modal-backdrop");
            $('.ibox-title').remove();
            element_id = "sponsorCode";
        });
        //实施站点选择弹框
        $("#orgCode").on("click",function(){
            $('#ora_modal_title').text("选择发起单位")
            $('#addDiv').modal('show');
            $('.show').removeClass("modal-backdrop");
            $('.ibox-title').remove();
            element_id = "orgCode";
        });
        //实施部门选择弹框
        $("#departmentCode").on("click",function(){
            $('#ora_modal_title').text("选择发起单位")
            $('#addDiv').modal('show');
            $('.show').removeClass("modal-backdrop");
            $('.ibox-title').remove();
            element_id = "departmentCode";
        });

        //添加付款情况弹框
        $("#addFuKuai").on("click",function(){
            $('#paymentBatch').val("");
            $('#amountPayable').val("");
            $('#paymentProportion').val("");
            $('#remainingAmount').val("");
            $('#payDate').val("");
            $('#addPayment').modal('show');
            $('.show').removeClass("modal-backdrop");
        });
        //初始化合同性质
        if("${requestScope.poHead.taxType}"!=""){
            $("#taxType").val("${requestScope.poHead.taxType}");
        }
        //初始化是否为据实结算
        if("${requestScope.poHead.isRealSettle}"=="是"){
            $('#isRealSettle').attr("checked","checked");
        }
        //初始化合同类别
        if("${requestScope.poHead.taxPercent}"!=""){
            $("#taxPercent").val("${requestScope.poHead.taxPercent}");
        }
        //初始化合同类型
        if("${requestScope.poHead.poType}"!=""){
            $("#poType").val("${requestScope.poHead.poType}");
        }
        //初始化结算方式
        if("${requestScope.poHead.settleStyle}"!=""){
            $("#settleStyle").val("${requestScope.poHead.settleStyle}");
        }
        //初始化合同来源方式
        if("${requestScope.poHead.sourceMode}"!=""){
            $("#sourceMode").val("${requestScope.poHead.sourceMode}");
        }
        //初始化合同类型
        if("${requestScope.poHead.poType}"!=""){
            $("#poType").val("${requestScope.poHead.poType}");
        }
        //初始化附件
        if("${requestScope.poHead.fileUrl}"!=""){
            var urls="${requestScope.poHead.fileUrl}".split(",");
            var html = "";
            for (var i = 0; i <urls.length; i++) {
                if(urls[i]!=""){
                    html+="<a href='"+urls[i]+"'>"+urls[i].substr(urls[i].lastIndexOf("/") + 1)+"</a>\n"
                }
            }
            $("#showFile").html(html);
        }

        //初始化供应商信息
        if("${requestScope.poHead.staffCode}"!=""){
            $("#staffCode").val("${requestScope.poHead.staffCode}");
            funcVendorSelect();
        }
        //初始化合同金额及是否据实结算
        funcPoTypeChange();

        //设置日期插件
        $('#startDate').datepicker({
            todayBtn : "linked",
            keyboardNavigation : true,
            forceParse : true,
            calendarWeeks : false,
            autoclose : true,
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
        });

        $('#endDate').datepicker({
            todayBtn : "linked",
            keyboardNavigation : true,
            forceParse : true,
            calendarWeeks : false,
            autoclose : true,
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
        });

        $('#signDate').datepicker({
            todayBtn : "linked",
            keyboardNavigation : true,
            forceParse : true,
            calendarWeeks : false,
            autoclose : true,
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
        });

        $('#payDate').datepicker({
            todayBtn : "linked",
            keyboardNavigation : true,
            forceParse : true,
            calendarWeeks : false,
            autoclose : true,
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
        });

        //表单提交
        var l = $("#save").ladda();
        l.click(function() {
            $("#form").valid();
        });

        $("#form").validate({
            rules : {
                poHeadCode : {
                    required : true,
                    isCode : true,
                },
                poName : {
                    required : true,
                },
                projectCode : {
                    required : true,
                },
                vendorCode : {
                    required : true,
                },
                sponsorCode : {
                    required : true,
                },
                taxType : {
                    required : true,
                },
                taxPercent : {
                    required : true,
                },
                poType : {
                    required : true,
                },
                orgCode : {
                    required : true,
                },
                departmentCode : {
                    required : true,
                },
                settleStyle : {
                    required : true,
                },
                constructionSite : {
                    required : true,
                },
                sourceMode : {
                    required : true,
                },
                addDesc : {
                    required : true,
                },
                startDate : {
                    required : true,
                },
                endDate : {
                    required : true,
                },
                isRealSettle : {
                    required : true,
                },
                prepayAmount : {
                    required : true,
                },
                staffCode : {
                    required : true,
                },
                currencyCode : {
                    required : true,
                },
                signDate : {
                    required : true,
                },
                nextapprovername : {
                    required : true,
                }
            },
            submitHandler: function(form) {
                var submitFlag = "Y";
                //提交
                if(submitFlag=="Y"){
                    l.ladda('start');
                    form.submit();
                }

            }
        });
    });
    var element_id = "";
    //jstree单击事件
    var selectedNodeId = -1;
    function clickJsTree(nodeId){
        selectedNodeId = nodeId;
        var selectText =  $("#jstree_div").jstree(true).get_text(selectedNodeId);
        $('#'+element_id).val(selectText);
        $('#addDiv').modal('hide');
    }
    function dblclickJsTree(nodeId){
        if(selectedNodeId!=nodeId){
            selectedNodeId = nodeId;
            var selectText =  $("#jstree_div").jstree(true).get_text(selectedNodeId);
            $('#'+element_id).val(selectText);
            $('#addDiv').modal('hide');
        }
    }
    //默认jstree选择
    function stateReadyJsTree(nodeId){
        selectedNodeId = nodeId;
    }
    function close() {
        $("#addDiv").modal('hide').removeClass("show");
    }


    //合同类型值变
    function funcPoTypeChange(){
        var poTypevalue = $('#poType').val();
        if(poTypevalue=='POATYPE01'){//固定价款
            $('#isRealSettle').removeAttr("checked");
            $('#isRealSettle').attr("disabled","disabled");
            $('#poaAmount').removeAttr('readonly');
        }
        if(poTypevalue=='POATYPE02'){//据实结算
            $('#isRealSettle').attr("checked","checked");
            $('#isRealSettle').attr("disabled","disabled");
            $('#poaAmount').attr("readonly","readonly");
        }
    }

    //为外面的盒子绑定一个点击事件
    $("#uploadImgBtn0").click(function(e){
        imagesUpload(e);
    })

    function imagesUpload(e){
        var cid=e.currentTarget.id;
        var s=cid.substr(cid.length-1,1);
        /*
        1、先获取input标签
        2、给input标签绑定change事件
        3、把图片回显
         */
        //1、先回去input标签
        var $input = $("#file"+s+"");
        //2、给input标签绑定change事件
        $input.on("change" , function(){
            //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
            //获取选择图片的个数
            var files = this.files;
            // 通过FormData将文件转成二进制数据
            // 文件元素
            var file = document.querySelector('[type=file]');
            // 通过FormData将文件转成二进制数据
            var formData = new FormData();
            for(var i = 0;i<files.length;i++){
                formData.append("imgs", files[i]);
            }
            var ss=formData.get("fileImage[]");
            $.ajax({
                type: "post",
                url:  "web/poAgreementHead/file",
                data: formData,
                dataType: "json",
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                xhrFields:{withCredentials:true},
                async: true,    //默认是true：异步，false：同步。
                success: function (data) {
                    if(data!=""){
                        var url="";
                        var html = "";
                        for (var i=0;i<data.length;i++){
                            url+=data[i]+",";
                            html+="<a href='"+data[i]+"'>"+data[i].substr(data[i].lastIndexOf("/") + 1)+"</a>\n"
                        }
                        $("#fileUrl").val(url);
                        $("#showFile").html(html);
                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    redragonJS.alert(textStatus);
                },
            });
        })
    }

    //供应商下拉选中，加载信息
    function funcVendorSelect(){
        $.ajax({
            type: "post",
            url: "web/poAgreementHead/getMdVendor",
            data: {"vendorId": $("#staffCode").val()},
            async: true,
            dataType: "json",
            cache: false,
            success: function(data){
                $('#vendorAddress').val(data.vendorAddress);
                $.each(pdata,function(idx,item){
                    if (parseInt(item.level) == 0) {
                        if(item.code==data.vendorProvince){
                            $('#vendorProvince').val(item.names);
                        }
                    }
                    if (parseInt(item.level) == 1) {
                        if(item.code==data.vendorCity){
                            $('#vendorCity').val(item.names);
                        }
                    }
                });
                $('#staffName').val(data.vendorName);
                $('#contactName').val(data.contactName);
                $('#contactTelephone').val(data.contactTelephone);
                $('#bankCode').val(data.bankCode);
                $('#bankAccount').val(data.bankAccount);


            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }

    /**付款情况js   begin**/
    //支付金额值变事件
    function funcAmountPayableChange(){
        var amountPayable = $('#amountPayable').val();
        var poaAmount = $('#poaAmount').val();
        if(poaAmount!=null&&!''==poaAmount){
            $('#remainingAmount').val(accDel(poaAmount,amountPayable));
        }else{
            $('#remainingAmount').val(0);
        }
    }
    //js 金额相减
    function accDel(arg1, arg2) {
        var r1, r2, m;
        try { r1 = arg1.toString().split(".")[1].length;} catch (e) { r1 = 0; };
        try { r2 = arg2.toString().split(".")[1].length;} catch (e) { r2 = 0; };
        m = Math.pow(10, Math.max(r1, r2));
        return (arg1 * m - arg2 * m) / m;
    }

    //保存支付情况信息
    function savePoAgreementHeadM(){
        /*$("#addPaymentForm").validate({
            rules : {
                paymentBatch : {
                    required : true,
                },
                amountPayable : {
                    required : true,
                },
                paymentProportion : {
                    required : true,
                }
            },
            submitHandler: function(form) {
                alert(111111);
            }
        });*/
        var d = {};
        var t = $('#addPaymentForm').serializeArray();
        t.push({name: "poHeadCode", value: $('#poHeadCode').val()});
        $.each(t, function() {
            d[this.name] = this.value;
        });
        $.ajax({
            type: "post",
            url: "web/poAgreementHead/savePoAgreementHeadM",
            data: JSON.stringify(d),
            async: true,
            contentType : "application/json",
            dataType: "json",
            cache: false,
            success: function(data){
                console.log(data);
                closePopout();
                getPoAgreementHeadMList();
            }
        });
    }
    getPoAgreementHeadMList();
    //删除支付情况信息
    function deletePoAgreementHeadM(id){
        $.ajax({
            type: "post",
            url: "web/poAgreementHead/deletePoAgreementHeadM",
            data: JSON.stringify({"id":id}),
            contentType : "application/json",
            dataType: "json",
            async: true,
            cache: false,
            success: function(data){
                getPoAgreementHeadMList();
            }
        });
    }
    //查询支付情况信息
    function getPoAgreementHeadMList(){
        $.ajax({
            type: "post",
            url: "web/poAgreementHead/getPoAgreementHeadMList",
            data: {"poHeadCode": $("#poHeadCode").val()},
            async: true,
            cache: false,
            success: function(data){
                $('#subBody tr').each(function(i){
                    if(/\w*.?line\w*.?/.test($(this).attr('id'))){
                        $(this).remove();
                    }
                });
                var html = "";
                if(data != null && data.length>0){
                    for(var i=0;i<data.length;i++){
                        var subSize = (i+1);
                        html += '<tr id="line' + subSize + '">' +
                            '<td id="No' + subSize + '">' + subSize + '</td>' +
                            '<td id="subId' + subSize + '" style="display: none">'+data[i].id+'</td>' +
                            '<td id="subPaymentBatch' + subSize + '">' + data[i].paymentBatch+ '</td>' +
                            '<td id="subAmountPayable' + subSize + '">' + data[i].amountPayable + '</td>' +
                            '<td id="subPaymentProportion' + subSize + '">' + data[i].paymentProportion + '</td>' +
                            '<td id="subRemainingAmount' + subSize + '">' + data[i].remainingAmount + '</td>' +
                            '<td id="subPayDate' + subSize + '">' + data[i].payDate + '</td>' +
                            '<td id="subRemark' + subSize + '"></td>' +
                            '<td id="operation' + subSize + '" class="attachment">' +
                            /*'<button  id="edit' + subSize + '" type="button" style="margin-right: 3px" onclick="editSub(' + data[i].id + ')">编辑</button >' +*/
                            '<button id="del' + subSize + '" type="button" style="margin-left: 3px" onclick="deletePoAgreementHeadM(' + data[i].id + ')">删除</button>' +
                            '</td>' +
                            '</tr>'
                    }
                    $("#subBody").append(html);
                }else{
                    html += '<tr id="line_nothing">' +
                        '<td colspan="8" style="color: #bbbbbb">无付款信息</td>' +
                        '</tr>'
                    $("#subBody").append(html);
                }

            }
            ,
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }

    // 关闭弹框
    function closePopout() {
        $("#addPayment").modal('hide').removeClass("show");
    }

    /**付款情况js   end**/
</script>
<script>
    //ajax获取关联列表
    function getRelateListAjax(id,page){
        redragonJS.loading("relateListDiv");
        $.ajax({
            type: "post",
            url: "web/hrStaffDepartmentR/getFlowSelectRelateListAjax",
            data: {"departmentId": id,"page":page==null?1:page},
            async: false,
            dataType: "html",
            cache: false,
            success: function(data){
                redragonJS.removeLoading("relateListDiv");
                if(data!=""){
                    $("#relateListDiv").html(data);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }


    function getAddRelateModal(nodeId, id){
        $.ajax({
            type: "post",
            url: "web/hrStaffDepartmentR/getHrStaffDepartmentR",
            data: {"departmentId": nodeId,"sdId": id},
            async: false,
            dataType: "html",
            cache: false,
            success: function(data){
                if(data!=""){
                    $("#addModal").html(data);
                    $('#addDiv').modal('show');
                    $("div").removeClass("modal-backdrop show");
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                redragonJS.alert(textStatus);
            }
        });
    }

    $('#jstree_div1').jstree({
        'core' : {
            "themes" : {
                "stripes" : false,//背景是否显示间纹
                "dots": false,//是否显示树连接线
                "icons": true,//是否显示节点的图标
                "ellipsis": true,//节点名过长时是否显示省略号
            },
            'multiple' : false,  // 可否多选
            'dblclick_toggle': true,   //允许tree的双击展开
            'expand_selected_onload': false,
            'data' : {
                'url': 'web/hrDepartment/getHrDepartmentTreeData',
                'dataType': 'json',
                'data': function (node) { // 传给服务端点击的节点
                    return { 'nodeId': node.id };
                },
                success: function (data) {
                    if(data.id==""){
                        $("#jstree_div1").html("");
                    }else{
                        $("#addRootButton").hide();
                    }
                }
            },
            "check_callback" : true,
        },
        'plugins': ["state",'types','themes','search','unique','changed'],
        "types" : {
            "default" : {
                'icon' : 'fa fa-folder'
            },
            "root" : {
                "icon" : 'fa fa-home fa-lg',
            },
            "node" : {
                'icon' : 'fa fa-folder'
            },
        },
        'checkbox': {
            // 去除checkbox插件的默认效果
            'tie_selection': false,
            'keep_selected_style': true,
            'whole_node': false,
            'three_state': false,
        }
    })
    //单击事件
    .on('click.jstree', function(event) {
        getRelateListAjax(getTreeSelectNodeId1(),null);
    })


    //设置查询功能
    var to = false;
    $('#searchTree1').keyup(function() {
        if (to) {
            clearTimeout(to);
        }
        to = setTimeout(function() {
            var v = $('#searchTree1').val();
            $('#jstree_div1').jstree(true).search(v);
        }, 250);
    })
    //返回选择的节点id
    function getTreeSelectNodeId1(){
        var selectId = $("#jstree_div1").jstree(true).get_selected();
        selectedNodeId = selectId.toString();
        return selectId.toString();
    }
    //返回选择的节点type
    function getTreeSelectNodeType1(){
        return $("#jstree_div1").jstree(true).get_type(getTreeSelectNodeId());
    }

</script>

